<template>
  <el-container>
    <!-- 查询表单 -->
    <el-header>
      <el-form :inline="true" :model="searchForm" label-width="100px" label-position="left" class="demo-form-inline">
        <el-form-item label="员工编号">
          <el-input v-model="searchForm.employeeNo" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="searchForm.nationalId" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="searchForm.email" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="searchForm.phone" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="上级ID">
          <el-input v-model="searchForm.managerId" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="部门ID">
          <el-input v-model="searchForm.departmentId" style="width: 180px;"/>
        </el-form-item>
        <div>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="default" @click="onReset">重置</el-button>
          <el-button type="default" @click="onAdd" icon="CirclePlus">新增员工</el-button>
        </el-form-item>
        </div>
      </el-form>
    </el-header>
    <el-divider direction="horizontal"></el-divider>
    <!-- 员工列表 -->
    <el-main class="cus-main">
      <el-table :data="empList" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="employeeNo" label="员工编号" />
        <el-table-column prop="firstName" label="名" />
        <el-table-column prop="lastName" label="姓" />
        <el-table-column prop="gender" label="性别" >
          <template #default="scope">
            {{ scope.row.gender === 1 ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="birthday" label="出生日期" v-if="false"/>
        <el-table-column prop="nationalId" label="身份证" v-if="false"/>
        <el-table-column prop="email" label="电子邮箱" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="hireDate" label="入职日期" v-if="false"/>
        <el-table-column prop="positionId" label="职位" v-if="false"/>
        <el-table-column prop="departmentId" label="部门" v-if="false"/>
        <el-table-column prop="managerId" label="上级" v-if="false"/>
        <el-table-column prop="countryCode" label="国家" v-if="false"/>
        <el-table-column prop="provinceCode" label="省" v-if="false"/>
        <el-table-column prop="cityCode" label="市" v-if="false"/>
        <el-table-column prop="countyCode" label="区/县" v-if="false"/>
        <el-table-column prop="address" label="通讯地址" v-if="false"/>
        <el-table-column prop="postalCode" label="邮编" v-if="false"/>
        <el-table-column prop="status" label="状态" >
          <template #default="scope">
            <el-tag :type="scope.row.status === 3 ? 'success' : 'danger'">
              {{
                employeeStatus.find((s) => s.value === scope.row.status).label
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              link
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </el-main>

    <!-- 新增员工对话框 -->
    <el-dialog v-model="dialogVisible" title="新增员工" header-class="dialog-custom-header" >
      <el-divider direction="horizontal" style="width: 95%"></el-divider>
      <el-form :model="newEmployee" label-width="100px" label-position="right"  :inline="true">
        <el-form-item label="员工编号" required>
          <el-input v-model="newEmployee.employeeNo" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="姓" required>
          <el-input v-model="newEmployee.lastName" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="名" required>
          <el-input v-model="newEmployee.firstName" style="width: 180px;" />
        </el-form-item>
        <el-form-item label="性别" required>
          <el-select v-model="newEmployee.gender" placeholder="性别" style="width: 180px;">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" required v-if="isEdit">
          <el-select v-model="newEmployee.status" placeholder="状态" style="width: 180px;">
            <el-option v-for="item in employeeStatus" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="newEmployee.birthday"
            type="date"
            placeholder="选择日期"
            style="width: 180px;"
          />
        </el-form-item>
        <el-form-item label="身份证" required>
          <el-input v-model="newEmployee.nationalId" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="newEmployee.email" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="newEmployee.phone" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="入职日期">
          <el-date-picker
            v-model="newEmployee.hireDate"
            type="date"
            placeholder="选择日期"
            style="width: 180px;"
          />
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="newEmployee.positionId" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="newEmployee.departmentId" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="上级">
          <el-input v-model="newEmployee.managerId" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="newEmployee.countryCode" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="省">
          <el-input v-model="newEmployee.provinceCode" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="newEmployee.cityCode" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="newEmployee.countyCode" />
        </el-form-item>
        <el-form-item label="邮编">
          <el-input v-model="newEmployee.postalCode" style="width: 180px;"/>
        </el-form-item>
        <el-form-item label="通讯地址">
          <el-input v-model="newEmployee.address" style="width: 500px;"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { get, post, put, del} from "@/utils/request";
const employeeStatus = ref([])
const searchForm = reactive({
  employeeNo: null,
  nationalId: null,
  email: null,
  phone: null,
  managerId: null,
  departmentId: null,
});
const listTotal = ref(0);


const currentPage = ref(1);
const pageSize = ref(10);


const empList = ref([])

const dialogVisible = ref(false);
const newEmployee = reactive({
  id: null,
  employeeNo: null,
  firstName: null,
  lastName: null,
  gender: null,
  birthday: null,
  nationalId: null,
  email: null,
  phone: null,
  hireDate: null,
  positionId: null,
  departmentId: null,
  managerId: null,
  countryCode: null,
  provinceCode: null,
  cityCode: null,
  countyCode: null,
  address: null,
  postalCode: null,
  status: null,
});

const isEdit = ref(false);
const onSubmit = async () => {
  let succ = false;
  if (isEdit.value) {
    let payload = {
    firstName: newEmployee.firstName,
    lastName: newEmployee.lastName,
    gender: newEmployee.gender,
    status: newEmployee.status,
    birthday: newEmployee.birthday,
    nationalId: newEmployee.nationalId,
    email: newEmployee.email,
    phone: newEmployee.phone,
    hireDate: newEmployee.hireDate,
    positionId: newEmployee.positionId,
    departmentId: newEmployee.departmentId,
    managerId: newEmployee.managerId,
    countryCode: newEmployee.countryCode,
    provinceCode: newEmployee.provinceCode,
    cityCode: newEmployee.cityCode,
    countyCode: newEmployee.countyCode,
    address: newEmployee.address,
    postalCode: newEmployee.postalCode,
  };
  await put("/mdm/employees/" + newEmployee.id, payload)
    .then((res) => {
      if (res.data.code === 0) {
        onSearch();
        ElMessage.success("新增成功");
        succ = true;
      } else if (res.data.code === 401) {
        sessionStorage.clear();
        window.location.assign("/login");
      } else {
        ElMessage.error(res.data.msg ? res.data.msg : res.data.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
  } else {
  let payload = {
    employeeNo: newEmployee.employeeNo,
    firstName: newEmployee.firstName,
    lastName: newEmployee.lastName,
    gender: newEmployee.gender,
    birthday: newEmployee.birthday,
    nationalId: newEmployee.nationalId,
    email: newEmployee.email,
    phone: newEmployee.phone,
    hireDate: newEmployee.hireDate,
    positionId: newEmployee.positionId,
    departmentId: newEmployee.departmentId,
    managerId: newEmployee.managerId,
    countryCode: newEmployee.countryCode,
    provinceCode: newEmployee.provinceCode,
    cityCode: newEmployee.cityCode,
    countyCode: newEmployee.countyCode,
    address: newEmployee.address,
    postalCode: newEmployee.postalCode,
  };
  await post("/mdm/employees", payload)
    .then((res) => {
      if (res.data.code === 0) {
        onSearch();
        succ = true;
        ElMessage.success("新增成功");
      } else if (res.data.code === 401) {
        sessionStorage.clear();
        window.location.assign("/login");
      } else {
        ElMessage.error(res.data.msg ? res.data.msg : res.data.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
  }
  if (succ) {
    dialogVisible.value = false;
  }
  
};

const handleEdit = (row) => {
  // 编辑逻辑
  isEdit.value = true;
  Object.assign(newEmployee, row);
  dialogVisible.value = true;
  // console.log("编辑", row);
};

const handleDelete = (index, row) => {
  // 删除逻辑
  del("/mdm/employees/" + row.id)
    .then((res) => {
      // console.log("搜索结果:", res);
      if (res.data.code === 0) {
        empList.value = empList.value.filter(
          (item) => item.id !== row.id
        );
        ElMessage.success("删除成功");
      } else if (res.data.code === 401) {
        sessionStorage.clear();
        window.location.assign("/login");
      } else {
        ElMessage.error(res.data.msg ? res.data.msg : res.data.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
};
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  onSearch();
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  onSearch();
};
const onSearch = () => {
  let params = {
    employeeNo: searchForm.employeeNo,
    nationalId: searchForm.nationalId,
    email: searchForm.email,
    phone: searchForm.phone,
    departmentId: searchForm.departmentId,
    managerId: searchForm.managerId,
    page: currentPage.value,
    size: pageSize.value,
  };
  get("/mdm/employees", params)
    .then((res) => {
      // console.log("搜索结果:", res);
      if (res.data.code === 0) {
        empList.value = res.data.data.data;
        listTotal.value = res.data.data.total;
      } else if (res.data.code === 401) {
        sessionStorage.clear();
        window.location.assign("/login");
      } else {
        ElMessage.error(res.data.msg ? res.data.msg : res.data.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
};
const onReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = null;
  });
};
const onAdd = () => {
  isEdit.value = false;
  Object.keys(newEmployee).forEach((key) => {
    newEmployee[key] = null;
  });
  dialogVisible.value = true;
};

onMounted(async() => {
  // 初始化字典
  await get("/mdm/employees/status")
    .then((res) => {
      // console.log("搜索结果:", res);
      if (res.data.code === 0) {
        employeeStatus.value = res.data.data.data;
      } else if (res.data.code === 401) {
        sessionStorage.clear();
        window.location.assign("/login");
      } else {
        ElMessage.error(res.data.msg ? res.data.msg : res.data.message);
      }
    })
    .catch((e) => {
      ElMessage.error(e.message);
    });
  onSearch();
});
</script>


